<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document上机部分</title>
</head>
<body>
        <form action="#" id="myform">
            Username:<input type="text" name="username"><br>
            Password:<input type="password" name="password"><br>
            Sex:<input type="radio" name="sex" value="male">男
                <input type="radio" name="sex" value="female">女<br>
            Age:<select name="age" id="age">
                <option value="18">18</option>
                <option value="19">19</option>
                <option value="20">20</option>
                <option value="21">21</option>
                <option value="21">22</option>
                <option value="23">23</option>
                <option value="24">24</option>
                <option value="25">25</option> 
            </select><br>
            Hobby:<input type="checkbox" name="hobby" value="song">song
            <input type="checkbox" name="hobby" value="dance">dance
            <input type="checkbox" name="hobby" value="draw">draw
            <input type="checkbox" name="hobbyall" onclick="checkAll(this.checked)" />全选/全不选 <br/>
            <button type="submit" name="submit" >注册</button>
        </form>  
        grade: <select name="grade" id="grade" onchange="changeClass(this)">  
            <option value="">请选择年级</option>   
            <option value="0">S1</option>   
            <option value="1">S2</option>   
            <option value="2">S3</option>   
            <option value="3">S4</option>   
            </select>  
            class: <select name="class" id="class">  
            <option value="">请选择课程</option>   
            </select>  
     </select>
        <script>  
            document.getElementById('myform').addEventListener('submit', function(event) {   
                var username = document.getElementsByName('username')[0].value;  
                var password = document.getElementsByName('password')[0].value;  
                var sex = document.getElementsByName('sex')[0].value;  
                var age = document.getElementById('age').value;  
                var hobbies = [];  
                var checkboxes = document.getElementsByName('hobby');  
                for (var i = 0; i < checkboxes.length; i++) {  
                    if (checkboxes[i].checked) {  
                        hobbies.push(checkboxes[i].value);  
                    }  
                }  
                var values = "Username: " + username + "\nPassword: " + password + "\nSex: " + sex + "\nAge: " + age + "\nHobbies: " + hobbies.join(', ');  
                alert(values);  // 用alert显示所有表单元素的值  
            });  
        </script>
        <script>
            function checkAll(c){
                var arr = document.getElementsByName("hobby");
                if(c){
                    for(var i=0;i<arr.length;i++){
                        arr[i].checked=true;
                    }
                }
                else{
                    for(var i=0;i<arr.length;i++){
                        arr[i].checked=false;
                    }
                }
            }
        </script>
      <script>  
        var classes = new Array();  
        classes[0] = ['java','sql','swing'];  
        classes[1] = ['jsp','js','oracle'];  
        classes[2] = ['spring','hibernate','struts'];  
        classes[3] = ['android','wp','ios'];  
          
        function changeClass(e) {  
        var grade = document.getElementById("grade").value;  
        var classSelect = document.getElementById("class");  
        var cs = classes[parseInt(grade)];  
          
        classSelect.options.length = 0;  
        for(var i = 0; i < cs.length; i++) {  
        var op = new Option(cs[i],cs[i]);  
        classSelect.add(op);  
        }  
        }  
        </script>  
</body>
</html>